import { FC } from "react";
import { QuestionRadioDefaultProps, QuestionRadioPropsType } from "./interface";
import { Radio, Space, Typography } from "antd";

const { Paragraph } = Typography;
export const Component: FC<QuestionRadioPropsType> = (
  props: QuestionRadioPropsType
) => {
  const {
    options = [],
    isVertical = false,
    title = "",
    value = "",
  } = {
    ...QuestionRadioDefaultProps,
    ...props,
  };

  return (
    <div>
      <Paragraph strong>{title}</Paragraph>
      <div>
        <Radio.Group value={value}>
          <Space direction={isVertical ? "vertical" : "horizontal"} wrap>
            {options.map((opt) => {
              const { value, text } = opt;
              return (
                <Radio value={value} key={value}>
                  {text}
                </Radio>
              );
            })}
          </Space>
        </Radio.Group>
      </div>
    </div>
  );
};

export default Component;
